<template>
  <a-modal size="mini" :visible="visible" @before-open="open" :on-before-ok="handleOk" @cancel="handleCancel" :align-center="false" title-align="start" width="50%" :mask-closable="false">
    <template #title> 更换货位 </template>
    <div>
      <a-table :pagination="false" :scroll="{ y: '400px' }" size="mini" class="table-singe-line" :data="tableList" style="margin-top: 10px">
        <template #columns>
          <a-table-column title="仓库">
            <template #cell="{ record, rowIndex }"> {{ record.warehouseName }}({{ record.warehouseCode }}) </template>
          </a-table-column>
          <a-table-column title="店铺">
            <template #cell="{ record }">
              {{ record.shopName }}
            </template>
          </a-table-column>
          <a-table-column title="图片">
            <template #cell="{ record }">
              <ImgPopover :src="record.productImg">
                <template #con>
                  <a-image width="40" height="40" fit="contain" :src="record.productImg" />
                </template>
              </ImgPopover>
            </template>
          </a-table-column>
          <a-table-column title="SKU" :width="140">
            <template #cell="{ record }">
              {{ record.sku }}
            </template>
          </a-table-column>
          <a-table-column title="MSKU" :width="140">
            <template #cell="{ record }">
              {{ record.msku }}
            </template>
          </a-table-column>
          <a-table-column title="原库位" :width="100">
            <template #cell="{ record }">
              {{ record.oldLocationCode }}
            </template>
          </a-table-column>
          <!-- :sortable="{ sortDirections: ['ascend', 'descend'] }" -->
          <a-table-column :width="160">
            <template #title>
              <div>新库位</div>
              <div style="display: flex">
                <!-- <a-input-number hide-button v-model="titleFormValue.price" />
                <a-button size="small" class="gray-outline" style="margin-left: 5px" @click="setSpace">
                  <template #icon>
                    <icon-double-down />
                  </template>
                </a-button> -->
                <a-select placeholder="请选择" allow-create v-model="titleFormValue.locationCode">
                  <a-option v-for="item of houseLocationList" :label="item.locationCode" :value="item.locationCode"></a-option>
                </a-select>
                <a-button size="small" class="gray-outline" style="margin-left: 5px" @click="setSpace">
                  <template #icon>
                    <icon-double-down />
                  </template>
                </a-button>
              </div>
            </template>
            <template #cell="{ record }">
              <a-select placeholder="请选择" @change="singleSelLocationCode($event, record)" v-model="record.locationCode" allow-create>
                <a-option v-for="item of houseLocationList" :label="item.locationCode" :value="item.locationCode"></a-option>
              </a-select>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </div>
  </a-modal>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs, computed } from 'vue'
  import { findIdleLocationByWarehouse } from '@/api/warehouse'
  import { inventoryChangeLocation } from '@/api/inventory'
  import { Message } from '@arco-design/web-vue'
  import _ from 'lodash-es'
  export default defineComponent({
    props: ['list'],
    setup(props: any, { emit }) {
      let visible = ref(false)
      const formRef = ref()
      const data = reactive({
        titleFormValue: {
          locationCode: '',
        },
        houseLocationList: [],
        currentPage: '1',
        tableList: [],
      })

      const open = () => {
        getSpaceList()
        data.tableList = _.cloneDeep(props.list).map((e: any) => {
          e.oldLocationCode = e.locationCode
          return e
        })
      }
      const handleOk = async (done: any) => {
        let params: any = {
          itemParams: [],
        }
        data.tableList.forEach((e: any) => {
          let obj: any = {}
          obj.inventoryId = e.id
          obj.locationId = e.locationId
          obj.locationCode = e.locationCode
          params.itemParams.push(obj)
        })

        try {
          const res: any = await inventoryChangeLocation(params)
          if (res.code == 'SUCCESS') {
            Message.success('修改成功')
            visible.value = false
            emit('save')
          }
          done(true)
        } catch (error) {
          done(true)
        }
      }
      const handleCancel = () => {
        data.titleFormValue = {
          locationCode: '',
        }
        visible.value = false
      }
      // 获取仓位列表
      const getSpaceList = async () => {
        const res = await findIdleLocationByWarehouse({ warehouseCode: '11084' })
        data.houseLocationList = res?.data
      }
      const setSpace = () => {
        let obj: any = data.houseLocationList.find((e: any) => e.locationCode == data.titleFormValue.locationCode)
        data.tableList.map((e: any) => {
          e.locationCode = obj.locationCode
          e.locationId = obj.id
          return e
        })
      }

      const singleSelLocationCode = (val: string, item: any) => {
        let obj: any = data.houseLocationList.find((e: any) => e.locationCode == val)
        item.locationId = obj.id
      }

      return {
        ...(toRefs(data) as any),
        visible,
        formRef,
        open,
        handleOk,
        handleCancel,
        setSpace,
        singleSelLocationCode,
      }
    },
  })
</script>

<style lang="less" scoped>
  .modal-con {
    .arco-drawer {
      :deep(.arco-modal-body) {
        padding: 10px !important;
      }
    }
  }

  .upload {
    position: relative;
    :deep(.arco-upload-progress) {
      display: none;
    }
  }

  .text {
    position: absolute;
    left: 180px;
    top: 0;
  }

  .footer-text {
    font-size: 12px;
    color: darkgray;
  }
</style>
